import * as React from 'react';
//建立页面数据和store 的关联
import { connect } from 'react-redux'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import { Link, RouteComponentProps } from 'react-router-dom';
import { Button, WhiteSpace, WingBlank,Pagination,Icon } from 'antd-mobile';
import $ from 'jquery';
import '../../utils/common.scss'
import './index.scss'

import demo from './index.js'

import Top from '../../components/top/top'
interface IState {
}
interface IProps extends RouteComponentProps {
}
class Myinfo extends React.Component<IProps, IState> {
  state = {
  }
  componentDidMount(){
    console.log('componentDidMount执行次数');
    interface serializeable {
      tostring(): string;
      fromString(str: string): void;
    }
    
    class SendData implements serializeable {
      name: string;
      age: number;
    
      constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
      }
    
      public tostring() {
        return JSON.stringify({
          name: this.name,
          age: this.age,
        });
      }
    
      public fromString(str: string) {
        let data = JSON.parse(str);
        this.name = data.name;
        this.age = data.age;
      }
    }
    
    function sendToServer(obj: serializeable) {
      console.log(obj)
    }
    
    sendToServer(new SendData('name', 18));
    
  }
  render() {
    demo();
    
    //实现瀑布流
    let requireContext=(require as any).context('./img', false);//路径 是否子目录 文件后缀
    let images = requireContext.keys().map(requireContext);
    console.log(requireContext)

    // let nowWidth = null;//当前图片的宽度  
    // let nowHeight = null;//当前图片的宽度
    // let cols = 4;//列数
    // let heightArr:number[] =[];//存放每列的当前高度
    // //得到图片开始计算高度
    // images.forEach((item:any,index:any) => {
    //   nowWidth = ($('.imgs div').eq(index) as any).width();//当前图片的宽度  
    //   nowHeight = ($('.imgs div').eq(index) as any).height();//当前图片的宽度
    //   if(index<cols){
    //     heightArr[index]=nowHeight;
    //   }else{
    //     //因为是循环,排完第一排 就第二排。heightArr每列的高度都在不断累加
    //     var minHeight =Math.min(...heightArr);
    //     //根据当前最小的高度 判断是第几列
    //     var minCol = $.inArray(minHeight,heightArr);
    //     //设置样式
    //     $('.imgs li').eq(index).css({
    //       position:'absolute',
    //       left: minCol*nowWidth +'px',
    //       top: minHeight+'px'
    //     })
    //     //高度累加
    //     heightArr[minCol] += nowHeight;
    //   }
    // });


    let {} =this.state;
    return (
      <div>
        <Top history={this.props.history}></Top>
        <ul className='imgs'>
        {
          images.map((item:any)=>{
            return (<li><div><img src={item} className='img'/></div></li>);
          })
        }
        </ul>
      </div>
    )
  }
}


//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = ({ store }: any) => {
  return ({
    isLogin: store.isLogin,
    userInfo:store.userInfo
  })
}

const mapDispatch = ({ store }: any) => ({
  // changeLoaderType() {
  //   store.changeLoaderType(true)
  // }
  setPlayListAct(data:any){
    store.setPlayListAct(data)
  },
  setMp3ListAct(data:any){
    store.setMp3ListFun(data)
  },
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Myinfo); 